<template>
  <base-breadcrumb :title="titleName">
    <a-spin :spinning="loadingState.isDetail">
      <div class="box">
        <a-card>
          <title-name title="项目信息" />
          <div class="main_content">
            <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
              <a-descriptions-item label="分公司名称">
                {{ formInfo.branchComName || '无' }}
              </a-descriptions-item>
              <a-descriptions-item label="项目名称">
                {{ formInfo.projectName || '无' }}
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </a-card>
      </div>
      <div class="box">
        <a-card>
          <title-name title="律师函信息" />
          <div class="main_content">
            <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
              <a-descriptions-item label="函件编号">
                {{ formInfo.code || '无' }}
              </a-descriptions-item>
              <a-descriptions-item label="发函单位">
                {{ formInfo.seddingUnit || '无' }}
              </a-descriptions-item>
              <a-descriptions-item label="涉及金额(万元)">
                {{ formInfo.amount || '无' }}
              </a-descriptions-item>
            </a-descriptions>
            <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
              <a-descriptions-item label="收到时间">
                {{ formInfo.receivedDate || '无' }}
              </a-descriptions-item>
              <a-descriptions-item label="发函律所">
                {{ formInfo.seddingLaw || '无' }}
              </a-descriptions-item>
              <a-descriptions-item label="处理状态">
                {{
                  resolveStatus(formInfo.letterStatus) || '无'
                }}
              </a-descriptions-item>
            </a-descriptions>
            <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
              <a-descriptions-item label="主要内容">
                {{ formInfo.mainContent || '无' }}
              </a-descriptions-item>
            </a-descriptions>
            <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
              <a-descriptions-item label="备注">
                {{ formInfo.remark || '无' }}
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </a-card>
      </div>
      <div class="box">
        <a-card>
          <title-name title="进展情况" />
          <a-table
            :columns="theProgress_columns"
            :data-source="theProgress_loadData"
            rowkey="id"
            :pagination="false"
          >
            <div
              slot="attach"
              slot-scope="text, record"
            >
              <file-link :file-list="record.fileArrays" />
            </div>
            <div
              slot="Serial"
              slot-scope="text, record, index"
            >
              <template>
                <span>{{ index + 1 }}</span>
              </template>
            </div>
          </a-table>
        </a-card>
      </div>
      <div class="box">
        <a-card>
          <title-name title="批注意见" />
          <a-table
            :columns="theProgress_columns"
            :data-source="theProgress_loadData"
            rowkey="id"
            :pagination="false"
          >
            <div
              slot="attach"
              slot-scope="text, record"
            >
              <file-link :file-list="record.fileArrays" />
            </div>
            <div
              slot="Serial"
              slot-scope="text, record, index"
            >
              <template>
                <span>{{ index + 1 }}</span>
              </template>
            </div>
          </a-table>
        </a-card>
      </div>
      <div
        v-if="formInfo.destroyed"
        class="box"
      >
        <a-card>
          <title-name title="销项" />
          <div style="margin-left: 20px">
            <a-descriptions :column="{ xs: 1, sm: 1, md: 1 }">
              <a-descriptions-item label="销项说明">
                {{ formInfo.destroyed.comment }}
              </a-descriptions-item>
            </a-descriptions>
            <a-descriptions :column="{ xs: 1, sm: 1, md: 1 }">
              <a-descriptions-item label="销项证明文件">
                <file-link :file-list="formInfo.destroyed.fileInfoList" />
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </a-card>
      </div>
      <div class="box">
        <a-card>
          <title-name title="附件列表" />
          <UploadTableNew
            ref="uploadTable"
            mode="look"
            :disabled="true"
            :init-file-list="formInfo.fileList"
            :need-page="false"
            business-code="LCM13"
          />
        </a-card>
      </div>
    </a-spin>
    <div class="operation page-btn-right-top">
    <!-- <div class="operation" style="text-align: right; margin-right: 20px"> -->
      <a-button
        v-checkVisibleInDetail
        @click="$close()"
      >
        关闭
      </a-button>
    </div>
    <div class="coverlayer">
      <feed-back
        :visible="visible"
        :feedback-data="feedbackData"
        @ok="() => (visible = false)"
        @cancel="() => (visible = false)"
      />
    </div>
  </base-breadcrumb>
</template>

<script>
import { getDetail } from '@/api/legal/caseAndLetter/letterManage.js'
import feedBack from '../feedback'
import { CASE_STATUS_MAP } from '@/config/businessConfig.js'

export default {
  name: 'LawyerLetterDetails',
  components: {
    feedBack
  },
  data() {
    return {
      formInfo: {},
      loadingState: {
        isDetail: false
      },
      titleName: undefined,
      loading: false,
      queryParam: {},
      lawyerLetterDetails: {},
      theProgress_loadData: [],
      colums: [
        {
          title: '序号',
          scopedSlots: { customRender: 'Serial' }
        },
        {
          title: '风险提示',
          dataIndex: 'feedbackContent'
        },
        {
          title: '录入时间',
          dataIndex: 'entryTime'
        },
        {
          title: '附件',
          scopedSlots: { customRender: 'attach' }
        },
        {
          title: '反馈期限',
          dataIndex: 'feedbackPeriod'
        },
        {
          title: '提示人员',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      loadData: [],
      project: {},
      output: {},
      caseInformation: {},
      feedbackData: {},
      visible: false,
      theProgress_columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'Serial' }
        },
        {
          title: '推进事项',
          dataIndex: 'promotionMatters'
        },
        {
          title: '记录时间',
          dataIndex: 'recordTime'
        },
        {
          title: '附件',
          scopedSlots: { customRender: 'attach' }
        },
        {
          title: '详情描述',
          dataIndex: 'detailedDescription'
        }
      ]
    }
  },
  mounted() {
    this.getDetailReq()
  },
  methods: {
    /**
     * 解析状态值
     */
    resolveStatus(status) {
      return CASE_STATUS_MAP[status] || ''
    },
    async getDetailReq() {
      try {
        if (!this.$route.query.id) return
        const params = {
          id: this.$route.query.id
        }
        this.loadingState.isDetail = true
        const res = await getDetail(params)
        this.formInfo = {
          ...this.formInfo,
          ...res.data,
          branchComName: res.data?.projectInfo?.branchComName,
          projectName: res.data?.projectInfo?.projectName,
          legalTypeName: res.data?.legalType?.name,
          amount: res.data?.amountVO?.amount
        }
      } catch (e) {
        console.error(e)
      }
      this.loadingState.isDetail = false
    }
  }
}
</script>

<style scoped>
.box {
  margin: 12px 0;
}

.coverlayer {
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0.4;
  filter: alpha(opacity=40);
}

.main_content {
  padding: 0 20px;
  box-sizing: border-box;
}
</style>
